<div class="app-component">
    <div class="add-new-button-div">
        <div class="add-new-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Add New</h3>
            </div>
            <div class="panel-body">
                <div class="add-button" onclick="addNewHandle()">
                </div>
            </div>
        </div>
    </div>

    <div class="add-app-div">
    </div>

    <div class="app-list">
    </div>

    <div class="templates">

        <div class="edit-panel panel panel-primary form-horizontal">
            <div class="panel-heading">
                <div class="panel-title"></div>
            </div>
            <div class="panel-body edit-div form-group">
                <div class="code-element edit-panel-element">
                    <div class="code-label edit-element-label required">code:</div>
                    <div class="input-div">
                        <input name="code" class="code-value edit-element-value form-control" maxlength="30"/>
                    </div>
                </div>
                <div class="name-element edit-panel-element">
                    <div class="name-label edit-element-label required">name:</div>
                    <div class="input-div">
                        <input name="name" class="name-value edit-element-value form-control"/>
                    </div>
                </div>
                <div class="uri-element edit-panel-element">
                    <div class="uri-label edit-element-label">uri:</div>
                    <div class="input-div">
                        <input class="uri-value edit-element-value form-control"/>
                    </div>
                </div>
                <div class="description-element edit-panel-element">
                    <div class="description-label edit-element-label">description:</div>
                    <div class="input-div">
                        <textarea class="description-value edit-textarea-element-value form-control"/>
                    </div>
                </div>
                <div class="operation-button-wrap">
                    <button type="button" class="save-button btn btn-primary disable">
                        save
                    </button>
                    <button type="button" class="cancel-button btn btn-success">
                        cancel
                    </button>
                </div>
            </div>
        </div>

        <div class="edit-menu-panel panel panel-primary form-horizontal">
            <div class="subject"></div>
            <div class="type-element edit-panel-element form-group">
                <div class="type-label edit-element-label">type:</div>
                <div class="type-value-wrap">
                    <input type="radio" name="menu-type-value" value="0" checked/><span>menu</span>
                    <input type="radio" name="menu-type-value" value="1" /><span>menu folder</span>
                </div>
            </div>
            <div class="code-element edit-panel-element form-group">
                <div class="code-label edit-element-label required">code:</div>
                <div class="input-div">
                    <input name="code" class="code-value edit-element-value form-control" />
                </div>
            </div>
            <div class="name-element edit-panel-element form-group">
                <div class="name-label edit-element-label required">name:</div>
                <div class="input-div">
                    <input name="name" class="name-value edit-element-value form-control"/>
                </div>
            </div>
            <div class="description-element edit-panel-element form-group">
                <div class="description-label edit-element-label">description:</div>
                <textarea name="description" class="description-value edit-element-value form-control"/>
            </div>
            <div class="button-div">
                <button type="button" class="save-button btn btn-success">
                    Save
                </button>
                <button type="button" class="cancel-button btn btn-primary">
                    Cancel
                </button>
            </div>
        </div>

        <div class="edit-button-panel panel panel-primary form-horizontal">
            <div class="subject"></div>
            <div class="code-element edit-panel-element form-group">
                <div class="code-label edit-element-label required">code:</div>
                <div class="input-div">
                    <input name="code" class="code-value edit-element-value form-control"/>
                </div>
            </div>
            <div class="name-element edit-panel-element form-group">
                <div class="name-label edit-element-label required">name:</div>
                <div class="input-div">
                    <input name="name" class="name-value edit-element-value form-control"/>
                </div>
            </div>
            <div class="description-element edit-panel-element form-group">
                <div class="description-label edit-element-label">description:</div>
                <textarea name="description" class="description-value edit-element-value form-control"/>
            </div>
            <div class="button-div">
                <button type="button" class="save-button btn btn-success">
                    Save
                </button>
                <button type="button" class="cancel-button btn btn-primary">
                    Cancel
                </button>
            </div>
        </div>

        <div class="app-panel panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"></div>
                <div class="button-wrap">
                    <div class="edit-button"></div>
                    <div class="delete-button"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="id-element">
                    <div class="id-label body-element-label">id:</div>
                    <div class="id-value body-element-value"></div>
                </div>
                <div class="code-element">
                    <div class="code-label body-element-label">code:</div>
                    <div class="code-value body-element-value"></div>
                </div>
                <div class="name-element">
                    <div class="name-label body-element-label">name:</div>
                    <div class="name-value body-element-value"></div>
                </div>
                <div class="uri-element">
                    <div class="uri-label body-element-label">uri:</div>
                    <div class="uri-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="description-label body-element-label">description:</div>
                    <div class="description-value body-element-value"></div>
                </div>

                <div class="menu-list-wrap">
                    <div class="menu-list-button-wrap">
                        <div class="show-list-button" title="Show menu list"></div>
                        <div class="add-root-menu" title="Add root menu"></div>
                    </div>
                    <div class="add-root-menu-panel panel-body form-horizontal">
                        <ul class="nav nav-tabs">
                            <li class="add-new-root-menu-tab active"><a href="#" data-toggle="tab">Add new root menu</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="add-new-root-menu form-group tab-pane fade in active">
                                <div class="add-new-root-menu-panel panel panel-primary">
                                    <div class="type-element">
                                        <div class="type-label edit-element-label">type:</div>
                                        <div class="type-value-wrap">
                                            <input type="radio" name="type-value" value="0" checked/><span>menu</span>
                                            <input type="radio" name="type-value" value="1" /><span>menu folder</span>
                                        </div>
                                    </div>
                                    <div class="code-element">
                                        <div class="code-label edit-element-label required">code:</div>
                                        <div class="input-div">
                                            <input name="code" class="code-value edit-element-value form-control"/>
                                        </div>
                                    </div>
                                    <div class="name-element">
                                        <div class="name-label edit-element-label required">name:</div>
                                        <div class="input-div">
                                            <input name="name" class="name-value edit-element-value form-control"/>
                                        </div>
                                    </div>
                                    <div class="description-element">
                                        <div class="description-label edit-element-label">description:</div>
                                        <div class="input-div">
                                            <textarea name="description" class="description-value-textarea edit-element-value form-control"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="button-wrap">
                            <button type="button" class="ok-button btn btn-success">
                                OK
                            </button>
                            <button type="button" class="reset-button btn btn-info">
                                Reset
                            </button>
                            <button type="button" class="close-button btn btn-primary">
                                Close
                            </button>
                        </div>
                    </div>

                    <div class="menu-list">
                    </div>
                </div>
            </div>
        </div>

        <div class="menu-panel">
            <div class="self">
                <div class="menu-icon"></div>
                <div class="menu-code"></div>
                <div class="menu-name"></div>
                <div class="operation-button-wrap">
                    <div class="add-button" title="Add child menu(or button)"></div>
                    <div class="modify-button" title="Modify"></div>
                    <div class="delete-button" title="Delete"></div>
                </div>
            </div>
            <div class="children">
                <ul>
                </ul>
            </div>
        </div>

        <div class="button-panel">
            <div class="self">
                <div class="button-icon"></div>
                <div class="button-code"></div>
                <div class="button-name"></div>
                <div class="operation-button-wrap">
                    <div class="modify-button" title="Modify button"></div>
                    <div class="delete-button" title="Delete button"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<link type="text/css" rel="stylesheet"
      href="/static/clientlibs/tattoo/authorize/component/app-component/css/app-component.css"/>
<script type="text/javascript"
        src="/static/clientlibs/tattoo/authorize/component/app-component/js/app-component.js"></script>
